<template>
    <div class="msg-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <strong>系统消息</strong>
            </el-breadcrumb-item>
            <el-breadcrumb-item>消息列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="m-1">
            <!-- <el-result
                v-if="msgList.length == 0"
                icon="warning"
                title="警告提示"
                sub-title="暂无收到任何消息,去逛逛星球吧~~~"
            >
                <template #extra>
                <el-button type="primary">星球首页</el-button>
                </template>
            </el-result> -->
            <div class="m-table">
                 <el-table :data="msgList" lazy>
                    <el-table-column type="index" label="序号" width="50" />
                    <el-table-column prop="msgTitle" label="消息标题" />
                    <el-table-column prop="msgContent" label="消息内容"  />
                    <el-table-column prop="sysName" label="所属系统" />
                    <el-table-column prop="msgBusinessId" label="业务标识" />
                    <el-table-column prop="msgReceiver" label="消息范畴" />
                    <el-table-column prop="msgSendTime" label="推送时间" />
                    <el-table-column fixed="right" align="right">
                        <template #header>
                            <el-input v-model="tableDto.msgSearch" size="default" clearable placeholder="输入关键字检索" />
                        </template>
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                            <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination
                    background
                    v-model:current-page="tableDto.page"
                    v-model:page-size="tableDto.size"
                    :page-sizes="[15, 20, 30]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useStore } from 'vuex' 
onMounted(()=>{
    const store = useStore()
    msgList.value = store.state.websocketMsgList
    console.log('ws消息===>',msgList.value);
})

const totals = ref(100)
const webSocketInstance=reactive()
const tableDto = reactive({
    msgSearch: '',
    page: 1,
    size: 20
})

const msgSearch=ref('')
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
const msgList = ref([
    {
    date: '2016-05-03',
    name: '波波星球',
    address: '2023-03-21 15:24:26s',
    },
    {
        date: '2016-05-02',
        name: '波波星球',
        address: '2023-03-21 15:24:26s',
    },
    {
    date: '2016-05-03',
    name: '波波星球',
    address: '2023-03-21 15:24:26s',
    },
    {
        date: '2016-05-02',
        name: '波波星球',
        address: '2023-03-21 15:24:26s',
    },
    {
    date: '2016-05-03',
    name: '波波星球',
    address: '2023-03-21 15:24:26s',
    },
    {
        date: '2016-05-02',
        name: '波波星球',
        address: '2023-03-21 15:24:26s',
    },
    {
        date: '2016-05-02',
        name: '波波星球',
        address: '2023-03-21 15:24:26s',
    },
    {
    date: '2016-05-03',
    name: '波波星球',
    address: '2023-03-21 15:24:26s',
    },
    {
        date: '2016-05-02',
        name: '波波星球',
        address: '2023-03-21 15:24:26s',
    },
])

</script>

<style lang="less" scoped src="../../assets/css/sysMsgHandler.less"></style>